<div class="pm_modal small {{ctrl.class}}" role="dialog" style="display: block;">

    <form
        name="customizeInvoiceModalForm"
        novalidate
        class="modal-dialog">

        <button
            type="button"
            ng-click="ctrl.cancel()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action"
            class="fa fa-times close"></button>

        <div class="modal-content pm_form">

            <div class="modal-header">
                <h4 class="modal-title" translate translate-context="Title">Add invoice details</h4>
                <p class="alert alert-info" translate translate-context="Info">Add your name (or company name) and address to your invoices.</p>
            </div>

            <div class="modal-body">
                <label
                    for="customText"
                    translate
                    translate-context="Title">Customize invoices</label>

                <div class="ng-messages-wrapper">
                    <textarea
                        ng-model="ctrl.text"
                        name="customText"
                        rows="5"
                        data-is-valid-invoice-text
                        id="customText"
                        placeholder-translate="Add your name (or company name) and address to your invoices."
                        placeholder-translate-context="Info"></textarea>

                    <div ng-messages="customizeInvoiceModalForm.$error">
                        <p
                            class="text-red"
                            ng-message="isValidInvoiceText"
                            translate-context="Error"
                            translate>Invoice text has too many lines (limit: 5)</p>
                        <p
                            class="text-red"
                            ng-message="isValidInvoiceTextLine"
                            translate-context="Error"
                            translate>A line contains too many characters (limit: 40)</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="pm_button modal-footer-button" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button type="button" class="pm_button primary modal-footer-button" ng-click="ctrl.submit()" translate translate-context="Action">Submit</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
